<template>
  <div class="friendcircle-box">
    <van-grid :border="false" :column-num="3" square clickable v-if="imgList.length > 1">
      <van-grid-item v-for="(item,index) of imgList" :key="item.path" @click="Preview_img(index)">
        <van-image :src="staticpath+item.path" fit="cover" width="85px" height="85px" lazy-load>
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </van-grid-item>
    </van-grid>
    <van-image
      :src="staticpath+imgList[0].path"
      v-else-if="imgList.length == 1"
      @click="Preview_img()"
    >
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
  </div>
</template>

<script>
import { ImagePreview } from "vant"; //引入预览

export default {
  name: "",
  props: {
    imgList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    Preview_img(index) {
      let images = [];
      for (let item of this.imgList) {
        images.push(this.staticpath + item.path);
      }
      ImagePreview({
        images, //图片数组
        startPosition: index,
      });
    },
  },
};
</script>

<style scoped>
.friendcircle-box {
  margin: 0 40px 20px 70px;
}
/* .van-grid-item {
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}
.van-grid-item:nth-child(-n + 3) {
  border-top: 1px solid #eee;
}
.van-grid-item:nth-child(3n + 1) {
  border-left: 1px solid #eee;
} */
.onlyImg {
  height: 120px;
  width: 120px;
  border: 1px solid #eee;
}
</style>